<template>
	<view class="wrapper">
		<head-title :titleText="titleText" showLeftButton="true"></head-title>
		<view v-if="mask" class="mask">
			<view class="selectCont">
				<image @tap="offmask" class="delIcon" src="../../static/image/delIcon.png" mode="aspectFill"></image>
				<view v-for="(item,index) in selectList" @tap.stop="select(item)" hover-class="bindhover" :key="index" class="select">{{item}}</view>
				<view v-if="$type==1" @tap="address" hover-class="bindhover" class="select">指定地点</view>
				<picker :start="startT" :end="endT" v-else-if="$type==2" @change="bindtimer" mode="date" class="select">指定时间</picker>
			</view>
		</view>
		
		<!-- 活动名称 -->
		<view class="cont">
			<view v-if="titleText!='约吃饭'&&titleText!='约购物'&&titleText!='约唱歌'" class="list flex_row">
				<view class="name">{{actName}}</view>
				<view class="right">
					<input @input="bindName" type="text" :focus="true" value="" placeholder-class="pla" placeholder="请填写"/>
				</view>
			</view>
			<view v-if="titleText!='约旅行'">
				<!-- 汇合地点 -->
				<view @tap="bindAddress" class="list flex_row">
					<view class="name">汇合地点</view>
					<view class="right flex_row">
						<text v-if="addressTxt==''">请选择</text>
						<text v-else class="on">{{addressTxt}}</text>
						<image class="right_icon" src="../../static/image/right_icon.png"></image>
					</view>
				</view>
				<!-- 开始时间 -->
				<view @tap="bindTime" class="list flex_row">
					<view class="name">开始时间</view>
					<view class="right flex_row">
						<text v-if="timeTxt==''">请选择</text>
						<text v-else class="on">{{timeTxt}}</text>
						<image class="right_icon" src="../../static/image/right_icon.png"></image>
					</view>
				</view>
				<!-- 费用 -->
				<view class="list flex_row other h-m-t">
					<view class="name">费用</view>
					<view class="right flex_row">
						<view @tap="bindFee(item)" :class="{active:fee==item}" v-for="(item,index) in feeList" :key="index">{{item}}</view>
					</view>
				</view>
				<!-- 性别 -->
				<view class="list flex_row other">
					<view class="name">性别</view>
					<view class="right flex_row">
						<view @tap="bindSex(item)" :class="{active:sex==item}" v-for="(item,index) in sexList" :key="index">{{item}}</view>
					</view>
				</view>
			</view>
			<!-- 约旅行 -->
			<view v-else class="travel">
				<!-- 出行方式 -->
				<view @tap="bindGo" class="list flex_row">
					<view class="name">出行方式</view>
					<view class="right flex_row">
						<text v-if="goStyleTxt==''">请选择</text>
						<text v-else class="on">{{goStyleTxt}}</text>
						<image class="right_icon" src="../../static/image/right_icon.png"></image>
					</view>
				</view>
				<!-- 费用 -->
				<view @tap="bindGofee" class="list flex_row">
					<view class="name">费用</view>
					<view class="right flex_row">
						<text v-if="goFeeTxt==''">请选择</text>
						<text v-else class="on">{{goFeeTxt}}</text>
						<image class="right_icon" src="../../static/image/right_icon.png"></image>
					</view>
				</view>
				<!-- 对象 -->
				<view @tap="bindPartner" class="list flex_row h-m-t">
					<view class="name">旅行搭档</view>
					<view class="right flex_row">
						<text v-if="partnerTxt==''">请选择</text>
						<text v-else class="on">{{partnerTxt}}</text>
						<image class="right_icon" src="../../static/image/right_icon.png"></image>
					</view>
				</view>
				<!-- 出发时间 -->
				<view @tap="bindTime" class="list flex_row">
					<view class="name">开始时间</view>
					<view class="right flex_row">
						<text v-if="timeTxt==''">请选择</text>
						<text v-else class="on">{{timeTxt}}</text>
						<image class="right_icon" src="../../static/image/right_icon.png"></image>
					</view>
				</view>
				<!-- 预计时间 -->
				<view @tap="bindNeedTime" class="list flex_row">
					<view class="name">预计时间</view>
					<view class="right flex_row">
						<text v-if="needTimeTxt==''">请选择</text>
						<text v-else class="on">{{needTimeTxt}}</text>
						<image class="right_icon" src="../../static/image/right_icon.png"></image>
					</view>
				</view>
			</view>
			<!-- 我接送 -->
			<view class="rlay flex_row">
				<checkbox-group class="checkbox-group" @change="bindRadio">
					<label class="checkbox flex_row">
						<checkbox value="我接送"/><text>我接送</text>
					</label>
				</checkbox-group>
			</view>
			<!-- 说明文字 -->
			<view class="explain">
				<textarea @input="bindExplain" cursor-spacing ="50" placeholder-class="pla" :placeholder="plaTxt"></textarea>
			</view>
			<!-- 添加图片 -->
			<view class="addPic flex_row">
				<view @tap="clearPic(index)" class="btnActive" v-for="(item,index) in imgList" :key="index">
					<image :src="item" mode="aspectFill"></image>
				</view>
				<view @tap="bindAdd" v-if="imgList.length<3" class="btnActive add flex_col"><image src="../../static/image/addPic.png" mode="aspectFill"></image></view>
			</view>
			<!-- 发布 -->
			<button @tap="submit" class="publish flex_row" type="default">
				<image src="../../static/image/fb.png"></image>
				<text>发布</text>
			</button>
		</view>
	</view>
</template>

<script>
	import headTitle from "../../components/headTitle.vue";
	import common from "../../common/network.js";
	var session = '',imgArr = [],limit=1;
	export default {
		components:{headTitle},
		data(){
			return{
				plaTxt:'没有说明,没人会参加您的约会...',
				titleText:'',actName:'',
				mask:false,$type:0,selectList:[],
				lu_type:1,h_class:'',h_title:'',
				addressTxt:'',timeTxt:'',startT:'',endT:'',
				feeList:['AA制','你买单','我买单'],fee:'AA制',
				sexList:['不限','男','女'],sex:'不限',
				h_profile:'',h_song:'',
				imgList:[],
				//旅行相关
				goStyleTxt:'',goFeeTxt:'',partnerTxt:'',needTimeTxt:'',
			}
		},
		onLoad:function(options){
			var title = options.title;
			limit=1;
			if(title!=undefined){
				imgArr = [];
				this.titleText = title;
				switch (title){
					case '约唱歌':this.h_class=6;break;
					case '约吃饭':this.h_class=4;break;
					case '约购物':this.h_class=7;break;
					case '约电影':this.actName = "电影名称";this.h_class=5;break;
					case '约运动':this.actName = "运动项目";this.h_class=2;break;
					case '约游戏':this.actName = "游戏名称";this.h_class=1;break;
					case '约旅行':this.actName = "目的地";this.lu_type = 2;this.h_class=3;break;
					case '约其他':this.actName = "活动名称";this.h_class=8;break;
				}
				session = options.session;
			}
			this.getNow();//获取当前时间
		},
		onShow:function(){
		},
		methods:{
			getNow:function(){
				function db(n){
					n<10?n='0'+n:n=n;
					return n;
				}
				var date = new Date();
				var Y = date.getFullYear();
				var M = date.getMonth();
				var D = date.getDate();
				this.startT = Y+'-'+db(M)+'-'+db(D);
				this.endT = (Y+4)+'-'+db(M)+'-'+db(D);
			},
			bindName:function(e){
				var str = e.detail.value;
				this.h_title = str;
			},
			bindAddress:function(){//点击选择地点
				this.selectList = ['不限地点'];
				this.mask = true;
				this.plaTxt = '';
				this.$type = 1;
			},
			offmask:function(){
				this.mask = false;
				this.plaTxt = '没有说明,没人会参加您的约会...';
			},
			select:function(text){
				var $type = this.$type;
				if($type==1){
					this.addressTxt = text;//地点
				}else if($type==2){
					this.timeTxt = text;//时间
				}else if($type==3){
					this.needTimeTxt = text;//（旅行）预计时间
				}else if($type==4){
					this.partnerTxt = text;//（旅行）搭档
				}else if($type==5){
					this.goFeeTxt = text;//（旅行）费用
				}else if($type==6){
					this.goStyleTxt = text;//（旅行）出行方式
				}
				this.mask = false;
				this.plaTxt = '没有说明,没人会参加您的约会...';
			},
			address:function(){//指定地点
				var that = this;
				uni.chooseLocation({
					success:function(e){
						that.addressTxt = e.name;
						var lat =  e.latitude;
						var lon = e.longitude;
						if(e.name!==''){
							that.mask = false;
							this.plaTxt = '没有说明,没人会参加您的约会...';
						}
					},
				})
			},
			bindTime:function(){//点击选择时间,
				this.selectList = ['不限时间','平时周末'];
				this.mask = true;
				this.plaTxt = '';
				this.$type = 2;
			},
			bindtimer:function(e){//指定时间
				console.log(e)
				this.timeTxt = e.detail.value;
				this.mask = false;
				this.plaTxt = '没有说明,没人会参加您的约会...';
			},
			bindFee:function(str){//费用选择
				this.fee = str;
			},
			bindSex:function(str){
				this.sex = str;
			},
			bindExplain:function(e){
				var str = e.detail.value;
				this.h_profile = str;
			},
			bindRadio:function(e){
				var arr = e.detail.value;
				if(arr.length>=1){
					console.log('选择了我接送');
					this.h_song = '我接送';
				}else{
					this.h_song = '';
				}
			},
			
			
			bindAdd:function(){//添加图片,
				var that = this;
				if(typeof (imgArr)=='string'){
					imgArr= imgArr.split(',');
				}	
				uni.chooseImage({
					count:1,
					sizeType:['compressed'],
					success:function(e){
						var arr = e.tempFilePaths;
						var imgSrc = arr[0];
						that.uploadImg(imgSrc);
						that.imgList.push(imgSrc);
					}
				})
			},
			uploadImg:function(src){
				var that = this;
				uni.uploadFile({
					url: 'https://yp.6vx.com/?m=Jke',
					filePath: src,
					name:'file',
					formData:{
						type:'zupload_upload_img',
						session:session
					},
					success:function(res){
						var imgs = JSON.parse(res.data);
						var src = imgs.data
						setTimeout(function(){
							imgArr.push(src);
						},100)
					}
				})
			},
			clearPic:function(index){
				var that = this;
				var arr = that.imgList;
				if(typeof (imgArr)=='string'){
					imgArr= imgArr.split(',');
				}	
				uni.showModal({
					confirmColor:"#6673FF",
					content:"您要删除这张照片吗？",
					success:function(res){
						if(res.confirm){
							imgArr.splice(index,1);
							arr.splice(index,1);
							that.imgList = arr;
						}
					}
				})
			},
			//旅行相关
			bindNeedTime:function(){//点击预计时间
				this.selectList = ['当天往返','两三天','一个周','半个月'];
				this.mask = true;
				this.$type = 3;
			},
			bindPartner:function(){//点击旅行搭档
				this.selectList = ['傻白甜','土豪男','气质女','小奶狗'];
				this.mask = true;
				this.$type = 4;
			},
			bindGofee:function(){
				this.selectList = ['AA制','我买单','你买单'];
				this.mask = true;
				this.$type = 5;
			},
			bindGo:function(){
				this.selectList = ['往返双飞','自驾游','大巴','高铁动车'];
				this.mask = true;
				this.$type = 6;
			},
			submit:function(){
				console.log(imgArr);
				if(typeof (imgArr)=='object'&&imgArr!=''){
					imgArr= imgArr.join(',');
				}
				if(limit==1){
					limit = 0;
					this.msgData();
				}else{
					return false;
				}
			},
			sendData:function(sex,fee){
				var that = this;
				var $data = {
					'type': 'zac_add_ac',
					'session': session,
					'lu_type':that.lu_type,
					'h_title': that.h_title,
					'h_class':that.h_class,
					'h_sex_str':sex,
					'h_time_str':that.timeTxt,
					'h_profile':encodeURI(that.h_profile),
					'h_money_item':fee,
					'h_areaitem':that.addressTxt,
					'h_song':that.h_song,
					'c_img':imgArr,
					'lu_go_style':that.goStyleTxt,
					'h_yue_time':that.needTimeTxt,
				};
				console.log($data);
				common.network.request($data,function(res){
					console.log(res);
					uni.showToast({
						icon:'success',
						title:'发布成功',
						success:function(){
							uni.setStorage({
								key: 'addAct',
								data: res	
							})
							setTimeout(function(){
								limit = 1;
								uni.navigateBack({
									
								})
							},1500)
						}
					})
				})
			},
			msgData:function(){
				var that = this;
				var sex = '',fee = '';
				if(that.lu_type==1){
					sex = that.sex;
					fee = that.fee;
					switch (sex){
						case '不限':sex = '不限男女'
						break;
						case '男':sex = '只限男'
						break;
						case '女':sex = '只限女'
						break;
					}
					switch (that.h_class){
						case 4:that.h_title='一起吃饭'
							break;
						case 6:that.h_title='唱歌邀请'
							break;
						case 7:that.h_title='逛街购物'
							break;
					}
					if(that.h_title.replace(/(^\s*)|(\s*$)/g, "")==""){
						modeldata('请输入活动名称');
					}else if(that.addressTxt==''){
						modeldata('请选择地点');
					}else if(that.timeTxt==''){
						modeldata('请选择时间');
					}else{
						that.sendData(sex,fee);
					}
				}else{
					sex = that.partnerTxt;
					fee = that.goFeeTxt;
					that.addressTxt = that.h_title;
					if(that.partnerTxt==""){
						modeldata('请选择旅行搭档');
					}else if(that.lu_go_style==""){
						modeldata('请选择出行方式');
					}else if(that.h_yue_time==""){
						modeldata('请选择预定时间');
					}else if(fee==''){
						modeldata('请选择出行费用');
					}else{
						that.sendData(sex,fee);
					}
				}
				function modeldata(txt){
					uni.showModal({
						content:txt,
						showCancel:false,
						confirmColor:'#4C1BD6',
					})
					return false;
				}
			},
			
		}
	}
</script>

<style scoped>
	.wrapper{
		background: #F5F5F5;
		font-size: 32px;
		position: relative;
	}
	.cont{
		padding-bottom: 100px;
	}
	.mask{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0.5);
		z-index: 4;
	}
	.selectCont{
		width: 74%;
		background: #fff;
		border-radius: 16px;
		position: absolute;
		top: 24%;
		left: 13%;
		z-index: 1000;
	}
	.delIcon{
		width: 64px;
		height: 64px;
		position: absolute;
		top: -80px;
		right: -10px;
	}
	.selectCont .select{
		padding: 26px 0;
		border-bottom: 1px solid #F1F1F1;
		text-align: center;
	}
	.selectCont .select:first-of-type{
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
	}
	.selectCont .select:last-of-type{
		border-bottom-left-radius: 16px;
		border-bottom-right-radius: 16px;
		border-bottom: none;
	}
	.selectCont picker{
		border-top: 1px solid #F1F1F1;
		border-top-left-radius: 0 !important;
		border-top-right-radius: 0 !important;
	}
	.list{
		padding: 24px 30px;
		border-bottom: 1px solid #F5F5F5;
		justify-content: space-between;
		background: #fff;
	}
	.list .name{
		width: 200px;
	}
	.list .right{
		width: 490px;
		overflow: hidden;
		white-space: nowrap;
		text-align: right;
		color: #C3C3C3;
		justify-content: flex-end;
		font-size: 30px;
	}
	.list .right .on{
		color: #353535;
	}
	.list .right input{
		width: 100%;
		font-size: 30px;
		color: #353535;
	}
	.right_icon{
		margin-left: 16px;
	}
	.h-m-t{
		margin-top: 10px;
	}
	.other .right{
		color: #353535;
		justify-content: flex-end;
		position: relative;
	}
	.other .right view{
		padding: 0 30px;
		text-align: center;
		position: relative;
	}
	.other .right view:after{
		content: '';
		height: 60%;
		width: 1px;
		background: #c4c4c4;
		position: absolute;
		top: 20%;
		right: 0;
	}
	.other .right view:first-of-type{
		padding-left: 0;
	}
	.other .right view:last-of-type{
		padding-right: 8px;
	}
	.other .right view:last-of-type:after{
		width: 0;
	}
	.other .right view.active{
		color: #6673FF;
		transition: all 0.4s;
	}
	.rlay{
		text-align: right;
		padding: 26px 30px;
		font-size: 30px;
		justify-content: flex-end;
	}
	.rlay text{
		margin-left: 10px;
		margin-right: 8px;
	}
	.explain{
		background: #fff;
		font-size: 28px;
		padding: 30px;
	}
	.explain textarea{
		height: 150px;
		width: 100%;
	}
	.addPic{
		padding: 30px;
	}
	.addPic view{
		width: 30.8%;
		height: 210px;
		background: #fff;
		border-radius: 8px;
		margin-right: 3.8%;
		overflow: hidden;
	}
	.addPic view:active{
		box-shadow: 0 0 10px rgba(0,0,0,0.1);
	}
	.addPic view:last-of-type{
		margin-right: 0;
	}
	.addPic view image{
		width: 100%;
		height: 100%;
		border-radius: 8px;
	}
	.addPic view.add{
		justify-content: center;
	}
	.addPic view.add image{
		width: 70px;
		height: 70px;
	}
	button.publish{
		border-radius: 0;
		background: linear-gradient(to right,#6E6CFD,#A23CF5);
		color: #fff;
		font-size: 34px;
		justify-content: center;
		width: 100%;
		line-height: 2.8;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	button.publish:active{
		background: linear-gradient(to right,#A23CF5,#6E6CFD);
		transition: all 0.4s; 
	}
	.publish image{
		width: 32px;
		height: 32px;
		margin-right: 20px;
	}
</style>
